:root{
    --max-breakdown-width: 70%;
    --max-video-width: 80%;
}

.breakdowns{
    padding: 50px 0;
    margin: 0 auto;
    text-align: center;
    position: relative;
    align-items: center;
    width: var(--max-breakdown-width);
}

.breakdown-container{
    width: 100%;
    padding-bottom: 20px;
}


/* Styles pour le conteneur vidéo */
.video-container {
    max-width: var(--max-video-width); /* La largeur maximale est de 100% */
    margin: 0 auto;
    text-align: center;
    position: relative;
    padding-top: 20px;
}

/* Réduire la largeur de la vidéo elle-même pour qu'elle ne dépasse pas la largeur du conteneur */
video {
    max-width: var(--max-video-width); /* La largeur maximale est de 100% */
}

/* Styles pour les contrôles personnalisés */
.custom-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

button {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    outline: none;
    padding: 5px;
}

input[type="range"] {
    width: 100px;
    margin: 0 10px;
}


.additional-commentary p{
    text-align: left;
    display: inline-block;
    padding-bottom: 20px;
    max-width: 65%;
}

.breakdown-divider {
    border: none;
    border-top: 5px solid #db6c34; /* Couleur de la ligne de séparation */
    margin: 20px auto; /* Espacement autour de la ligne de séparation */
    width: 65%; /* Longueur de la ligne de séparation */
}